

<div class="">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <div class="user-comment">     
        <div class="user-comment-tx">
            {% if user.img%}
            <img src="{{user.img}}" width="40" class="img-circle"></img>
            {%else%}
            <img src="/image/tx/tx-default.jpg" width="40"></img>
            {%endif%}
        </div>
        <br/>
        <div class="user-comment-edit clearfix">
            <form id="user-comment-form" method="post" role="form">
                {% csrf_token %}
                <textarea id="comment" name="comment" class="form-control" rows="4" placeholder="请输入评论 限200字!"></textarea>
                <br/>
                <button type="submit" class="btn btn-danger pull-right">提交</button>
            </form>
        </div>
                   
        <br/>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <ul>
            {% for comment in comment_list%}
            <li class="list-group-item ">
                  <div class="row clearfix">
				<div class="col-md-1 column">
<!--头像和其他~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div class="user-comment-tx ">
                
                {% if comment.user.img %}
                <img src={{comment.user.img}} width="40" class="img-circle" align="absbottom" >
                {%else%}
                <img src="/image/tx/default.jpg" width="40" align="absbottom">
                {%endif%}
                <br/>  <a>{{comment.user.username}}</a> 
            </div>
                    </div>
<div class="col-md-11 column">
              
                {% if comment.parent %}                                                        
                        <a>回复：“@ {{comment.parent.user.username}} “ 的评论：</a>
                <button type="button" class="btn btn-default btn-xs"
                        data-container="body" 
                        data-toggle="popover" 
                        data-placement="top" 
                        data-content="  {% autoescape on %}
                      用户”{{comment.parent.user.username}}“：{{comment.parent.text}}
                        {% endautoescape %} ">
                        查看
                    </button>
                                                                      
                {% endif %}
            
        
<!--评论正文~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                      
                 <div class="user-comment-content alert alert-danger">                   
                <p>
                    评论：
                    {% autoescape on %}
                    {{comment.text}}
                    {% endautoescape %}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                ({{comment.create_time|date:"Y-m-d H:i:s" }}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <p>
                    <a class='quote' href="#anchor-quote" onclick="return CommentQuote('{{comment.user.username}}',{{comment.id}});">回复 </a>
                   
                     </p>
            </div>
</div>
            </li>
            {% endfor%}
        </ul>
    </div>
    
</div>
<br/>



<script language="javascript" type="text/javascript">
    function CommentQuote(user_name, commend_id){
        comment = document.getElementById('comment');
        comment.value = "@['"+user_name+"', "+commend_id+"]: ";
        comment.focus();;
        comment.setSelectionRange(comment.value.length, comment.value.length);
    };

    $('#user-comment-form').submit(function(){
        $.ajax({
            type:"POST",
            url:"/comment/{{article.en_title}}",
            data:{"comment":$("#comment").val()},
            beforeSend:function(xhr){
                xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));  
            },
            success:function(data,textStatus){
                $("#comment").val("");
                $(".user-comment ul").prepend(data);
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.responseText);

            }

        });
        return false;
    }); 
</script>

<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
</script>